<template>
  <el-menu
    default-active="2"
    @open="handleOpen"
    @close="handleClose">
    <el-menu-item v-for="item in menus" :key="item.index" :index="item.index">
      <a :href="item.path">{{ item.name }}</a>
    </el-menu-item>
  </el-menu>
</template>
<script>

export default {
  name: 'Menu',
  data: function() {
    return {
      menus: [
        {
          index: '1-1',
          path: '/',
          name: '首页'
        },
        {
          index: '1-2',
          path: '/system/user',
          name: 'User'
        },
        {
          index: '1-3',
          path: '/system/group',
          name: 'Group'
        },
        {
          index: '1-4',
          path: '/permission',
          name: 'Permission'
        },
        {
          index: '1-5',
          path: '//www.baidu.com',
          name: '百度'
        }
      ]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

